[CSS] 테이블 태그에서 td 태그, 테두리간 간격 조정 방법, border-spacing

테이블(table) 태그를 사용해 표를 만든 뒤 각각의 셀, td 태그 간의 간격을 조정하는 방법에 대하여 알아봅니다.

# Table 테이블에서 border-spacing 셀 간격 조절하기

만약 테이블 셀 사이의 간격이 존재하거나 없는 경우 이를 변경하기 위해서 사용하는 css 속성 border-spacing입니다.을 사용하여 조정할 수 있습니다. 아래와 같이 사용합니다.

위와같이 border-spacing 속성을 사용하면 셀 사이, 즉 테두리 사이의 간격을 원하는 값으로 조정할 수 있습니다. 위에는 border-spacing 아래에 border-collapse속성을 separate으로 지정하였는데 만약 spacing을 지정하였음에도 변화가 없다면 이 속성이 collapse로 설정되었는지 확인하시기 바랍니다. border-spacing은 separate일 경우에만 적용됩니다. 그럼 아래 예제를 참고하세요.

# border-spacing 예제소스 코드보기 아래는 border-spacing 속성의 크기 값에 따른 몇 가지 예제소스입니다. 값에따라 어떻게 달라지는지 확인해보세요.

! border-spacing: 10px 인 경우 @border.css

@border.html

위 코드의 실행결과 아래와 같이 출력됩니다.

1

2

3

! border-spacing 값이 0인 경우의 예제

보시는 것처럼 테이블 안의 td태그, 즉 셀간의 간격이 10px입니다. 그럼 값이 0px을 주고 어떻게 변하는지 보겠습니다.
@border.css

@ border.html

아래는 실행결과입니다.

4

5

6

# 마치면서, 자세한 설명

위의 두 가지 예제를 보면 아래는 border-spacing 값에 따라 간격이 조정되었음을 확인할 수 있습니다.
이처럼 테이블의 간격을 조정할때 margin이나 left, right 속성을 이용하지 않고도 간단하게 border-spacing만으로 셀사이 간격이 가능한점 알아두시기 바랍니다.